<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <div th:replace="fragments/resourceLink :: resourceLink"></div>
    <script type="text/javascript" src="../../../resources/js/noticeList.js"></script>
    <title>online_book</title>


    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" charset="UTF-8" href="https://translate.googleapis.com/translate_static/css/translateelement.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:300,600" rel="stylesheet"/>
    <link rel='stylesheet' href='../../../resources/css/bootstrap.min.css'/>
    <link rel='stylesheet' href="../../../resources/css/bootstrap-datetimepicker.min.css"/>
    <link rel='stylesheet' href="../../../resources/css/components.css"/>
    <link rel='stylesheet' href="../../../resources/css/jquery-ui.css"/>
    <link rel="stylesheet" href="../../../resources/css/styles.css" />
    <link rel='stylesheet' href="../../../resources/css/core.css"/>
    <link rel='stylesheet' href="../../../resources/css/pagination.css"/>
    <link rel='stylesheet' href="../../../resources/css/manager.css"/>
    <script src="../../../resources/js/jquery-3.1.1.min.js"></script>
    <!--<script src="../../../resources/js/jquery.min.js"></script>-->
    <script src='../../../resources/js/bootstrap.min.js'></script>
    <script src="../../../resources/js/manager.js"></script>
   <!-- <script src="../../../resources/js/app.js"></script>-->
    <script src="../../../resources/js/booked.js"></script>

    <script src="../../../resources/js/bootstrap-datetimepicker.min.js"></script>
    <link rel='stylesheet' href="../../../resources/css/bootstrap-datetimepicker.min.css"/>
    <script src="../../../resources/js/moment-with-locales.js"></script>
    <script src="../../../resources/js/bootstrap-datetimepicker.min.js"></script>
    <script src="../../../resources/js/bootstrap-datetimepicker.zh-CN.js"></script>

    <script>

    </script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-8 column col-md-offset-2">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <div class="page-header">
                                <h1>
                                    校園心裏輔導系統
                                    <small>在线预约</small>
                                </h1>

                            </div>
                            <hr>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <div class="navbar navbar-inverse" th:replace="fragments/headmanager :: headmanager">
                                </div>
                            </div>
                        </div>
                    </div>
                    </br>

                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <form role="form">
                                <div class="form-group hidden">
                                    <label for="exampleInput1">预约人ID</label>
                                    <input type="text" class="form-control" id="exampleInput1" th:value="${session.user.userId}"/>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInput2">选择预约的老师</label>
                                    <select id="exampleInput2" class="form-control">
                                        <option data-th-each="tag,tagsIndex:${teacherList}"
                                                data-th-value="${tag.tc_userId}"
                                                data-th-text="|${tag.teacherName} -----  ${tag.userInfo.mobilePhone}|">老师
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInput3">预约时间</label>
                                    <input type="text" class="form-control" id="exampleInput3" />
                                   <!-- <div class="input-append date" id="exampleInput3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                                        <input class="span2" size="16" type="text" value="12-02-2012">
                                        <span class="add-on"><i class="icon-remove"></i></span>
                                        <span class="add-on"><i class="icon-th"></i></span>
                                    </div>-->
                                </div>
                                <div class="form-group">
                                    <label for="exampleInput4">简要描述咨询内容</label>
                                    <textarea type="text" class="form-control" id="exampleInput4"></textarea>
                                </div>
                                <button type="button" class="btn btn-default" onclick="book()">Submit</button>
                            </form>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>
                                        申请时间
                                    </th>
                                    <th>
                                        预约老师
                                    </th>
                                    <th>
                                        预约咨询时间
                                    </th>
                                    <th>
                                        预约状态
                                    </th>
                                    <th>
                                        反馈信息
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="user,userStat:${bookedlist}">
                                    <td th:text="${user.submitTime}">
                                        1
                                    </td>
                                    <td th:text="${user.bebookedUserName}">
                                        TB - Monthly
                                    </td>
                                    <td th:text="${user.bookTime}">
                                        01/04/2012
                                    </td>
                                    <td th:text="${user.stateName}">
                                        Default
                                    </td>
                                    <td th:text="${user.feedback}">
                                        Default
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<!--<div class="header">
    <h1 class="text&#45;&#45;center">Image caption on hover state</h1>
    <h2 class="text&#45;&#45;center">Hover over Figaro</h2>
</div>

    <div class="wrapper" th:each="user,userStat:${noticeList}">
        <div class="caption" th:data-title="${user.noticeTitle}" th:data-description="${user.noticeContent}">
            <img th:src="${user.noticeImage}" alt="css-tooltip" onload="AutoResizeImage(150,150,this)" />
        </div>
    </div>-->

<!--</div>-->
</body>
</html>